// 电池进度条
import QtQuick 2.15

Item {
    id: root
    
    property real value: 0
    property real minimum: 0
    property real maximum: 100
    property real progress: Math.max(0, Math.min(1, (value - minimum) / (maximum - minimum)))
    
    property real alarmValue: 30
    property color normalColorStart: "#32CD33"
    property color normalColorEnd: "#3CB385"
    property color alarmColorStart: "#FA7671"
    property color alarmColorEnd: "#CC2626"
    property color borderColor: "#646464"
    
    property real borderWidth: 5
    property real borderRadius: 8
    property real headRadius: 3
    
    property real currentValue: value
    
    Behavior on currentValue {
        NumberAnimation {
            duration: 200
            easing.type: Easing.OutQuad
        }
    }
    
    onValueChanged: {
        currentValue = value
    }
    
    Rectangle {
        id: batteryBody
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        width: parent.width - parent.width / 15
        radius: borderRadius
        border.width: borderWidth
        border.color: borderColor
        color: "transparent"
    }
    
    Rectangle {
        id: batteryHead
        anchors.left: batteryBody.right
        anchors.verticalCenter: parent.verticalCenter
        width: parent.width / 15
        height: parent.height / 3
        radius: headRadius
        color: borderColor
    }
    
    Rectangle {
        id: batteryFill
        anchors.left: batteryBody.left
        anchors.top: batteryBody.top
        anchors.bottom: batteryBody.bottom
        property real fillMargin: borderWidth + Math.min(batteryBody.width, batteryBody.height) / 20
        anchors.leftMargin: fillMargin
        anchors.topMargin: fillMargin
        anchors.bottomMargin: fillMargin
        width: (batteryBody.width - (fillMargin * 2)) * (currentValue / maximum)
        radius: 5
        
        gradient: Gradient {
            GradientStop { 
                position: 0.0
                color: currentValue <= alarmValue ? alarmColorStart : normalColorStart
            }
            GradientStop { 
                position: 1.0
                color: currentValue <= alarmValue ? alarmColorEnd : normalColorEnd
            }
        }
        
        visible: currentValue > minimum
    }
}

